<template>
    <div class="Detial body">
        <div class="lef" v-if="JSON.stringify(info) != '{}'">
            <div class="content">
                <div class="co_imgbox">
                    <img :src="info.cover_image_url" alt="" />
                </div>

                <h1 class="co_title">
                    <i v-if="info.is_recommend"><b>推荐</b></i>
                    <span class="spanact">{{ info.title }}</span>
                </h1>
                <h2 class="co_tools">
                    <h3 v-if="info.user">
                        <h6 v-if="info.user">
                            <img :src="info.user.avatar_url" alt="" />
                        </h6>
                        <div class="useraaa">
                            <span v-if="info.user">{{
                                info.user.nickname
                            }}</span>
                            <i>{{ info.user.identity_name }}</i>
                        </div>
                        <!-- </div>
                        <span v-if="info.user">{{ info.user.nickname }}</span> -->
                        <!-- <i>人民网</i> -->
                        <!-- <h5>
                            <img src="../assets/img/i_img_white_+.png" alt="" />
                            <b>关注</b>
                        </h5> -->
                    </h3>
                    <h4>
                        <p>{{ info.created_at }}</p>
                        <ul
                            v-if="
                                info.view_count ||
                                info.view_count == 0 ||
                                info.comment_count ||
                                info.comment_count == 0
                            "
                        >
                            <li v-if="info.view_count || info.view_count == 0">
                                <img
                                    src="../assets/img/i_icon_chakan.png"
                                    alt=""
                                />
                                <span>{{ info.view_count }}</span>
                            </li>
                            <li
                                v-if="
                                    info.comment_count ||
                                    info.comment_count == 0
                                "
                            >
                                <img
                                    src="../assets/img/i_icon_pinglun.png"
                                    alt=""
                                    style="margin-top: 1px"
                                />
                                <span>{{ info.comment_count }}</span>
                            </li>
                            <!-- <li>
                                <img
                                    src="../assets/img/fenxiangzhuanfa.png"
                                    alt=""
                                />
                                <span>{{ info.share_count }}</span>
                            </li>
                            <li>
                                <img src="../assets/img/guanzhu.png" alt="" />
                                <span>{{ info.favorite_count }}</span>
                            </li> -->
                        </ul>
                    </h4>
                </h2>

                <div class="co_tag">
                    <ul v-if="info.subject_key_words">
                        <li
                            v-for="(
                                item, index
                            ) in info.subject_key_words.split(' ')"
                            :key="index"
                        >
                            <span>{{ item }}</span>
                        </li>
                    </ul>

                    <span
                        >新更新<i>{{ info.update_count }}</i
                        >篇/<i>{{ info.article_count }}</i
                        >篇文章</span
                    >
                </div>

                <!-- <h4
                    class="co_ztcon"
                    :style="lore_more ? 'height:auto;' : 'height:50px;'"
                >
                    {{ info.subject_desc }}
                </h4> -->

                <div class="zt_more">
                    <div
                        class="zt_detail"
                        v-html="info.description"
                        :style="
                            lore_more
                                ? 'height:auto;'
                                : 'height:50px;overflow:hidden;'
                        "
                    ></div>

                    <Disscuss :ifmargin="true" v-if="false" />
                </div>
                <div class="co_showmore" @click="lore_more = !lore_more">
                    {{ lore_more ? '收起' : '展开更多' }}
                </div>
            </div>

            <div class="li_zhuanti" v-if="!lore_more">
                <dl>
                    <dd><img src="../assets/img/i_icon_btbq.png" alt="" /></dd>
                    <dt>专题文章</dt>
                </dl>
                <ul v-if="false">
                    <li>
                        <span>按时间</span>
                        <img src="../assets/img/guanzhu.png" alt="" />
                    </li>
                    <div></div>
                    <li>
                        <span>按浏览量</span>
                        <img src="../assets/img/guanzhu.png" alt="" />
                    </li>
                    <div></div>
                    <li>
                        <span>按评论量</span>
                        <img src="../assets/img/guanzhu.png" alt="" />
                    </li>
                </ul>
            </div>

            <List
                :type="'index'"
                v-if="!lore_more"
                :id="this.$router.history.current.query.id"
            />
        </div>
        <div class="rig">
            <Popularity />
            <Special />
            <Active />
        </div>
    </div>
</template>

<script>
import Popularity from '../components/Popularity';
import Special from '../components/Special';
import Active from '../components/Active';
import Disscuss from '../components/Disscuss';
import List from '../components/List';
import { axiosGet } from '../server/axios';
export default {
    name: 'DeTial',
    components: {
        Popularity,
        Special,
        Active,
        Disscuss,
        List,
    },
    data() {
        return {
            // 展开更多
            lore_more: false,
            info: {},
        };
    },
    mounted() {
        this.getDetial();
    },
    watch: {
        $route: 'reloadDetail',
    },
    methods: {
        reloadDetail() {
            this.getDetial();
        },
        getDetial() {
            axiosGet(
                `/api/subjects/${this.$router.history.current.query.id}`,
                {},
                (res) => {
                    console.log(res.data);
                    if (res.code != 'ok') {
                        this.$notify({
                            title: '警告',
                            message: res.msg,
                            type: 'warning',
                        });
                    }
                    this.info = res.data;
                }
            );
        },
    },
};
</script>

<style scoped lang="scss">
.Detial {
    width: 1200px;
    margin: 20px auto 50px;
    overflow: hidden;
}
.lef {
    float: left;
    width: 770px;
    overflow: hidden;
    box-shadow: 0 0 8px 4px #f5f5f5;
    margin-bottom: 8px;
}
.rig {
    width: 410px;
    float: right;
    overflow: hidden;
    box-shadow: 0 0 8px 4px #f5f5f5;
    margin-bottom: 8px;
}

.content {
    padding: 0 20px;
    overflow: hidden;

    .co_imgbox {
        overflow: hidden;
        margin-bottom: 15px;

        img {
            width: 100%;
        }
    }

    .co_tag {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        ul {
            width: 600px;
            li {
                float: left;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 10px;
                height: 20px;
                background: #f5f5f5;
                border-radius: 4px;
                margin-right: 4px;
                font-size: 12px;
                font-family: Source Han Sans SC VF;
                font-weight: 400;
                color: #a7a7a7;
                margin-bottom: 4px;

                span {
                    white-space: nowrap;
                }
            }
        }

        span {
            font-size: 13px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #787878;
            line-height: 18px;
        }
    }

    .co_head {
        height: 58px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #787878;
        line-height: 18px;
        cursor: pointer;

        span {
            margin: 0 3px;
        }

        img {
            margin-top: 2px;
        }
    }

    .co_title {
        font-size: 26px;
        font-family: Source Han Sans SC VF;
        font-weight: 500;
        color: #262626;
        line-height: 36px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;

        .spanact {
            text-indent: 2em;
        }

        i {
            width: 40px;
            height: 20px;
            background: linear-gradient(-90deg, #fd6403 0%, #e60012 100%);
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 2px;
            position: absolute;
            left: 5px;
            top: 7px;
        }
    }
    .co_tools {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;

        h3 {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            h6 {
                width: 35px;
                height: 35px;
                overflow: hidden;
                border-radius: 50%;

                img {
                    width: 100%;
                }
            }

            .useraaa {
                display: flex;
                flex-direction: column;

                i {
                    margin: 0 12px 0 8px;
                }
            }

            span {
                font-size: 16px;
                font-family: Source Han Sans SC VF;
                font-weight: 400;
                color: #262626;
                margin: 0 12px 0 8px;
            }

            i {
                font-size: 12px;
                font-family: Source Han Sans SC VF;
                font-weight: 400;
                color: #787878;
            }

            h5 {
                width: 61px;
                height: 31px;
                background: #ffffff;
                border: 1px solid #262626;
                border-radius: 4px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                margin-left: 10px;

                img {
                    margin-right: 4px;
                }
                b {
                    font-size: 14px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #262626;
                }
            }
        }

        h4 {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 14px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #a7a7a7;

            p {
                margin-right: 19px;
            }

            ul {
                display: flex;
                justify-content: center;
                align-items: center;
                li {
                    float: left;
                    margin-left: 9px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 13px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #a7a7a7;
                    img {
                        margin-right: 2px;
                    }
                }
            }
        }
    }
    .co_zhaiy {
        background: #fbfbfb;
        border: 1px solid #f2f2f2;
        border-radius: 4px;
        padding: 0 20px;
        display: flex;
        align-items: flex-start;

        span {
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 41px;
            height: 21px;
            background: #f4f4f5;
            border: 1px solid #cbcccf;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #787878;
            margin-top: 10px;
        }

        p {
            float: left;
            font-size: 14px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #787878;
            margin-left: 10px;
            width: 600px;
            line-height: 44px;
        }
    }
    .co_box {
        padding: 20px;
        font-size: 16px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #262626;
        line-height: 30px;
    }
    .cd_tag {
        padding: 0 24px;
        li {
            float: left;
            width: 42px;
            height: 20px;
            background: #f5f5f5;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #a7a7a7;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 3px;
        }
    }
    .co_ztcon {
        font-size: 14px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #787878;
        line-height: 28px;
        padding: 10px 0;
        overflow: hidden;
    }
    .co_showmore {
        font-size: 14px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #262626;
        margin: 10px 0 25px;
        cursor: pointer;
    }
}

.li_zhuanti {
    height: 60px;
    background: #fafafa;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    dl {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        dt {
            font-size: 22px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #262626;
            margin-left: 4px;
        }
    }

    ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #787878;

        div {
            width: 2px;
            height: 14px;
            background: #787878;
            margin: 0 14px;
        }

        li {
            cursor: pointer;
            img {
                margin-left: 3px;
            }
        }
    }
}

.zt_detail {
    font-size: 14px;
    font-family: Source Han Sans SC VF;
    font-weight: 400;
    color: #787878;
    line-height: 28px;
    margin-top: 10px;
}
</style>
